<template>
  <div class="tilt-box" ref="tiltBox">悬停我试试</div>
</template>

<script setup>
import { ref, onMounted } from "vue";

const tiltBox = ref(null);

onMounted(() => {
  const box = tiltBox.value;
  box.addEventListener("mousemove", (e) => {
    const rect = box.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    const centerX = rect.width / 2;
    const centerY = rect.height / 2;

    // 改成“鼠标按下去的方向”
    const rotateX = (y - centerY) / 10;
    const rotateY = -(x - centerX) / 10;

    box.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
  });

  box.addEventListener("mouseleave", () => {
    box.style.transform = "rotateX(0deg) rotateY(0deg)";
  });
});
</script>

<style>
.tilt-box {
  width: 300px;
  height: 300px;
  background: linear-gradient(135deg, #4facfe, #00f2fe);
  border-radius: 20px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
  transform-style: preserve-3d;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  user-select: none;
  perspective: 1000px;
}
</style>
